<template>
  <div class="carousel-notice">
    <el-carousel height="40px" direction="vertical" :autoplay="autoplay" indicator-position="none" v-if="isShow && list.length > 0">
      <el-carousel-item v-for="(item,index) in list" :key="index">
        <div class="item el-alert--warning is-light">
          <span class="icon el-icon-bell"></span>
          <div class="title" @click="noticeDetails(item.id)">{{item.title}}</div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <el-dialog title="公告" :visible.sync="dialogVisible" width="1000px">
      <div class="content">
        <h1 class="head-title">{{details.title}}</h1>
        <div class="mark">
          <span>发布时间：{{details.createddatetime}}</span>
        </div>
        <div class="text" v-html="details.content"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    props: {
      isShow: false,
    	autoplay: true
    },
    data() {
    	return {
        dialogVisible: false,
        list:[],
        total: 0,
        search: {
        	PageIndex: 1,
        	PageSize: 9
        },
        details:{}
    	};
    },
    mounted() {
      this.getList()
    },
    methods:{
      getList() {
      	this.$axios.post('/Announce/List',this.search).then((res) => {
      		this.list = res.rows;
      		this.total = res.total;
      	})
      },
      noticeDetails(id){
        this.details = {}
        this.dialogVisible = true
        this.$axios.get('/Announce/views?Id='+id).then((res) => {
        	this.details = res
        })
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
  .carousel-notice{
    .item{
      display: flex;
      align-items: center;
      height: 40px;
      padding: 0 15px;
      border-radius: 4px;
      .icon{
        padding-right: 5px;
      }
      .title{
        flex: 1;
        font-size: 14px;
        cursor: pointer;
      }
    }
    .content{
      min-height: 600px;
      .head-title{
        margin-top: 0;
        color: #333;
        font-size: 30px;
        font-weight: inherit;
      }
      .mark{
        padding: 8px 0px;
        border: 1px #e8e8e8 solid;
        border-left: none;
        border-right: none;
      }
      .text{
        margin-top: 15px;
      }
    }
  }
</style>
